import React from "react";
// 路由
import { useNavigate, Outlet } from 'react-router-dom';
// 组件
import TabBarCom from '../../components/tabbar'
import { Grid } from "antd-mobile-v5"
import { WingBlank } from "antd-mobile"
import SwiperCom from "../../components/common/swiper";
import Search from "../../components/common/search";
// 路由跳转组件
import Jump from '../../components/common/jump';

// 导入图片资源
import NavImg1 from '../../assets/images/nav-1.png'
import NavImg2 from '../../assets/images/nav-2.png'
import NavImg3 from '../../assets/images/nav-3.png'
import NavImg4 from '../../assets/images/nav-4.png'
// 导入样式文件
import './index.scss'

// 获取定位城市
import { getCurrentCity } from "../../utils/index";
// 导入 获取首页数据的api
import { HomeApi } from "../../api/model/home";


const navbarList = [
  {
    label: '整租',
    imgSrc: NavImg1,
    path: '/home'
  },
  {
    label: '合租',
    imgSrc: NavImg2,
    path: '/home'
  },
  {
    label: '地图找房',
    imgSrc: NavImg3,
    path: '/map'
  },
  {
    label: '去租房',
    imgSrc: NavImg4,
    path: '/home'
  },
]

if (navigator.geolocation) {
 (function() {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(position)
  },error=> {
    console.log(error)
  })

  
 })()
}


const Clist = () => {
  let navigate = useNavigate()
  function handleClick() {
    navigate('cityList', {state: { id: 32, name: '谢杰'}, replace: true})
  }
  return (
    <button onClick={() => handleClick()}>跳转</button>
  )
}

export default class Home extends React.Component {
  // const ref = useRef<SwiperRef>(null)
  state = {
    // 轮播图数据
    swiperList: [],
    // 租房小组数据
    groupsList: [],
    // 最新资讯数据
    newsList: []
  }

  // 获取轮播图数据
  async getSwiper() {
    await HomeApi.getSwiper().then(res => {
      res.body.map((item:any) => {
        return item.imgSrc = 'http://127.0.0.1:8080' + item.imgSrc
      })
      this.setState({
        swiperList: res.body
      })
    })
  }

  // 获取首页租房小组模块数据
  async getGroups(id:string) {
    await HomeApi.getGroups({arue: id}).then((res:any) => {
      res.body.map((item:any) => {
        return item.imgSrc = 'http://127.0.0.1:8080' + item.imgSrc
      })
      this.setState({
        groupsList: res.body
      })
    })
  }

  // 获取 最新资讯数据
  async getNews(id:string) {
    await HomeApi.getNews({area: id}).then((res:any) => {
      res.body.map((item:any) => {
        return item.imgSrc = 'http://127.0.0.1:8080' + item.imgSrc
      })
      this.setState({
        newsList:  res.body
      })
      // console.log(res.body)
    })
  }
  
  async componentDidMount() {
    await getCurrentCity().then((res:any) => {
      this.getSwiper()
      this.getGroups(res.value)
      this.getNews(res.value)
    })
    
  }

  // react组件已经被销毁，而此时我们的异步操作（通常为调用接口更改state操作）还未结束当我们的异步执行完成后要执行setState操作时，已经无法获得组件信息，由此造成该异常！
  // 我们应该在组件中通过componentWillUnmount钩子函数在组件销毁的时候将异步方法撤销：
  componentWillUnmount() {
    this.setState = ()=>false;
  }

  render() {
    const { groupsList, newsList } = this.state
    
    return (
      <div className="home">
        <TabBarCom title="首页">
          
          <SwiperCom imgList={this.state.swiperList}></SwiperCom>
          <Search/>
          
          {/* 导航栏 */}
          <Grid columns={4} gap={8} style={{backgroundColor: '#fff', margin: '10px 0 15px 0'}}>
            {
              navbarList.map((item: any, index) => {
                return <Grid.Item key={index}>
                  <Jump path={item.path}>
                    <div className="home_nav">
                      <img src={item.imgSrc} alt="" />
                      <span>{item.label}</span>
                    </div>
                  </Jump>
                </Grid.Item>
              })
            }
          </Grid>

          <div className="home_groups">
            <WingBlank size="md">
              <div className="flex_x_b home_groups_title">
                <h4>租房小组</h4>
                <span>更多</span>
              </div>
              <Grid columns={2} gap={8}>
                {
                  groupsList.map((item:any) => {
                    return <Grid.Item key={item.id} className="flex_x_b Grid_Item">
                      <div className="home_groups_box">
                        <h5>{item.title}</h5>
                        <span>{item.desc}</span>
                      </div>
                      <img src={item.imgSrc} alt="" />
                    </Grid.Item>
                  })
                }
              </Grid>
            </WingBlank>
          </div>
          
          <div className="home_news">
            <WingBlank size="md" >
              <h4>最新资讯</h4>
              {
                newsList.map((item:any) => {
                  return <Grid key={item.id} columns={3} gap={8} className="border_w2_b home_news_Grid">
                  <Grid.Item>
                    <img className="bor_rd_4" src={item.imgSrc} alt="" style={{width: '100%'}}/>
                  </Grid.Item>
                  <Grid.Item span={2}>
                    <div className='home_news_Grid_item flex_y_b'>
                      <p>{item.title}</p>
                      <div className="flex_x_b">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                      </div>
                    </div>
                  </Grid.Item>
                </Grid>
                })
              }
            </WingBlank>
          </div>
          
          多级路由懒加载的示列
          <Clist></Clist>
          <Outlet />
          <div>首页</div>
          <div>首页</div>
          <div>首页</div>
          <div>首页</div>
        </TabBarCom>
      </div>
    )
  }
}


